<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <van-button
        class="search-btn"
        slot="title"
        type="info"
        size="small"
        round
        icon="search"
      >搜索</van-button>
    </van-nav-bar>
    <List :channel="channel"/>
  </div>
</template>

<script>
// 1. 导入 获取频道列表的方法
import { getUserChannels,getArticles } from '@/api/user'
import List from "@/components/article-list.vue"
export default {
  name: 'home',
  data () {
    return {
      // 4. 定义数据接收频道列表
      channel: [],
      title:['推荐','html','开发者资讯','c++','css','数据库','区块链','go','产品','后端','linux']
    }
  },
  components:{
    List
  },
  async created () {
    // 3. 调用获取频道列表
    await this.loadChannels()
    console.log(this.channel);
  },

  methods: {
    // 2. 定义加载频道列表数据的方法
    async loadChannels () {
      try {
        const { data } = await getUserChannels()
        console.log(data);
        this.channel = data.data.channels
      } catch (err) {
        this.$toast('获取频道列表数据失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .page-nav-bar{
    background-color: #3296fa;
    position: fixed;
    width: 100%;
    z-index: 20;
  }
  .search-btn {
    width: 320px;
    height: 30px;
    background-color: #5babfb;
    border: none;
    font-size: 16px;
    .van-icon {
      font-size: 20px;
      color: white;
    }
  }
}

</style>